<template>
  <div class="card" v-if="isReady" @shortkey="addOrRemoveLabel">
    <v-alert
      v-if="permission1"
      border="top"
      color="red lighten-2"
      dark
      class="saveClass"
      type="error"
    >
      请不要跳页，操作不属于自己的数据
    </v-alert>
    <span class="title highlight">{{currentDoc.text}}</span>
    <!-- <v-card-text class="title highlight" v-text="currentDoc.text" /> -->
    <!-- <v-card-title class="v-title"> -->
    <multi-class-classification
      class="anno"
      :items="items"
      :textDoc="currentDoc"
      :labels="normalLabelList"
      :annotations="currentDoc.annotations"
      :add-label="addLabel"
      :delete-label="removeLabel"
    />
    <!-- </v-card-title> -->
  </div>
</template>

<script>
import Vue from 'vue'
// import UserService from '@/services/user.service.js'
import { mapActions, mapGetters, mapState } from 'vuex'
import MultiClassClassification from '@/components/organisms/annotation/MultiClassClassification'
Vue.use(require('vue-shortkey'))

export default {
  components: {
    MultiClassClassification
  },
  data() {
    return {
      permission1: false
    }
  },
  computed: {
    ...mapState('labels', ['items', 'normalLabelList']),
    ...mapState('documents', ['items', 'loading', 'isUser']),
    ...mapGetters('documents', ['currentDoc']),
    // 2021.7.28 防止快捷键报错 会让mutitype 失效 后 继续报错 服务器崩溃
    // multiKeys() {
    //   const multiKeys = {}
    //   for (const item of this.items) {
    //     multiKeys[item.id] = [item.suffix_key]
    //   }
    //   console.log(multiKeys)
    //   return multiKeys
    // },
    isReady() {
      return this.currentDoc && this.items && !this.loading
    }
  },

  fetch() {
    this.getNormalLabelList()
    console.log(this.normalLabelList)
    console.log(this.items)
    console.log(process.env.baseUrl)
    this.getLabelList({
      projectId: this.$route.params.id
    })
  },
  updated() {
    console.log(this.currentDoc)
  },

  methods: {
    ...mapActions('labels', ['getLabelList', 'getNormalLabelList']),
    ...mapActions('documents', [
      'getDocumentList',
      'deleteAnnotation',
      'updateAnnotation',
      'addAnnotation'
    ]),
    removeLabel(annotationId) {
      const payload = {
        annotationId,
        projectId: this.$route.params.id
      }
      console.log(payload)
      // this.deleteAnnotation(payload)
    },
    updateLabel(labelId, annotationId) {
      const payload = {
        annotationId,
        label: labelId,
        projectId: this.$route.params.id
      }
      this.updateAnnotation(payload)
    },
    async addLabel(labelId) {
      const payload = {
        label: labelId,
        projectId: this.$route.params.id
      }
      await this.addAnnotation(payload)
      setTimeout(() => {
        if (!this.isUser.id) {
          this.permission1 = true
          setTimeout(() => {
            this.permission1 = false
          }, 5000)
        }
      }, 1000)
    },
    addOrRemoveLabel(event) {
      const label = this.items.find(
        item => item.id === parseInt(event.srcKey, 10)
      )
      const annotation = this.currentDoc.annotations.find(
        item => item.label === label.id
      )
      if (annotation) {
        this.removeLabel(annotation.id)
      } else {
        this.addLabel(label.id)
      }
    }
  }
}
</script>

<style scoped>
.anno {
}
.highlight {
  white-space: pre-wrap;
}
.card {
  position: relative;
  width: 2000px;
}
.title {
  position: absolute;
}
.v-title {
  width: 100vw
}
.saveClass {
  position: absolute;
  top: -60%;
  left: 15%;
  width: 30%;
  z-index: 99;
}
</style>
